'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { Link} from 'react-router';
import * as actions from '../../actions/index';
import Tab from 'qnui/lib/tab';
import Notice from 'qnui/lib/notice';
import Dialog from 'qnui/lib/dialog';
import Button from 'qnui/lib/button';
import Icon from 'qnui/lib/icon';
import Tag from 'qnui/lib/tag';
import { Row, Col } from 'qnui/lib/grid';

import Tools from 'utils/index';
import linkConfig from 'utils/urls';
import './index.scss'; 
const links = Tools.isLocal() ? linkConfig.local : linkConfig.onLine;
class Index extends React.Component {
    constructor(props) { 
        super(props);
		this.dispatch = this.props.dispatch;  
        this.state = {
			showDialog:false,
			topics:[]
        };
		this.dispatch(
			actions.getStatus({
				sid:window.info.sid
			})
		);
	}
	handleShowOrderState(){
		this.dispatch(
			actions.getTmcState({
				user_nick:window.info.user_nick
			})
		);
	}
	onClose(){
		this.dispatch(
			actions.closeDialog(this.props.index.tmcStatus)
		);
	}
	closeLoadingDialog(){
		
	}
   watting(){
	   Dialog.alert({content:"本功能为定制客户专属，详情联系旺旺：kekydream"})
   }
	selectTopic(topic,selected){
		const topics = this.state.topics;
		if(selected){
		   topics.push(topic);
		}else{
		   const index = topics.indexOf(topic);
		   topics.splice(index,1);
		}
		this.setState({"topics":topics});
	}
	selectAllTopics(){
		const topics = [];
		for(let key in this.props.index.topics){
			topics.push(this.props.index.topics[key].topic);
		}
		this.setState({topics});
		this.dispatch(
			actions.permitTopics({
				topics:topics.join(",")
			})
		);
	}
	openTopics(){
		const topics = this.state.topics.join(",");
		this.dispatch(
			actions.permitTopics({
				topics
			})
		);
	}
	cancleTmcUser(){
		Dialog.confirm({
			content: '确定关闭倒计时吗？一旦关闭，任何依赖订单处理的功能将不可用。',
			onOk: () => {
				this.dispatch(
					actions.cancleTmcUser({
						user:window.info.user_nick
					})
				);
			}
		});
	}
	componentWillReceiveProps(nextProps){
		let topics = [];
		if(nextProps.index.tmc_user && nextProps.index.tmc_user.is_valid=="true" ){
			if(!nextProps.index.tmc_user.topics){
				for(let key in this.props.index.topics){
					topics.push(this.props.index.topics[key].topic);
				}
			}else{
				topics = nextProps.index.tmc_user.topics.string
			}
		}
		this.setState({topics})
	}
  render() {
	const topics = this.props.index.topics?this.props.index.topics:[];
	const selectedTopics = this.state.topics;
	const tmcStatus = this.props.index.tmcStatus;
	let tmcButton = "";
	if(tmcStatus==1){
		tmcButton = <Button 
						  size="large" 
						  shape="warning"  
						  onClick={this.handleShowOrderState.bind(this)}
						>
							<Icon type="play" />
							运行中
					  </Button>;
	}
	if(tmcStatus==0){
		tmcButton = <Button 
						  size="large" 
						  onClick={this.handleShowOrderState.bind(this)}
						>
							<Icon type="stop" />
							暂停中
					  </Button>;
	}
	const tabBarExtraContent =<Button onClick={this.cancleTmcUser.bind(this)} size="small" shape="warning">全部取消</Button>
    return <div className="home-page">
			<Dialog visible={this.props.index.showTmcDialog}
                    onOk={this.openTopics.bind(this,false)}
                    onCancel={this.onClose.bind(this)}
                    onClose={this.onClose.bind(this)} 
					title="订单处理选项"
					style={{width:"600px"}}
					>
                <Row justify="center">
					  <Tab defaultActiveKey="1" tabBarExtraContent={tabBarExtraContent} size="small"  style={{width:"100%"}}>
						<Tab.TabPane tab="全部开通" key="1" style={{textAlign:"center"}}>
							<div style={{color:"#999999"}}>一键开通最为简单</div>
							<Button size="large" shape="warning" type="primary" onClick={this.selectAllTopics.bind(this)} >一键全部开通</Button>
						</Tab.TabPane>
						<Tab.TabPane tab="选择开通" key="2">
							<div style={{color:"#999999"}}>选择开通最少的订单通知，可加快处理速度</div>
							{topics.map((topic)=>{
								let selected=false;
								for(let i in selectedTopics){
									if(selectedTopics[i]==topic.topic){
										selected=true;
									}
								}
								return <Tag shape="selectable" selected={selected} type="normal" onSelect={this.selectTopic.bind(this,topic.topic)}>{topic.name}</Tag>
							})}
						</Tab.TabPane>
					  </Tab>
				</Row>
            </Dialog>
			<Row style={{padding:"10px 0"}}>
				<Col>
					<Row>
					  <Col style={{display:"none",overflow:"hidden",height:"60px",margin:"0 4px",background:"url(https://img.alicdn.com/imgextra/i4/27390555/TB2QoVpo3JlpuFjSspjXXcT.pXa-27390555.jpg) center"}}>
					  </Col>
					</Row>
					{/*
					*/}
					<Row>
					  <Col>
						<div className="next-dialog normal-execu-box">
							<div className="next-dialog-header">常用操作</div>
							<div className="next-dialog-body">
								<Tag shape="link"><Link to="/zhekou1">限时折扣</Link></Tag>
								<Tag shape="link"><Link to={{pathname:"mjs1",state:{createNew:"true"}}}>满打折</Link></Tag>
								<Tag shape="link"><Link to={{pathname:"zhekou_limit_step1",state:{createNew:"true"}}}>限购优惠</Link></Tag>
							</div>
							<a href="javascript:;" className="next-dialog-close"><Icon type="set" /></a>
						</div>
					  </Col>
					</Row>
					<Row style={{marginTop:"5px"}}>
						
						{/*
						<Col>
							<div className="next-dialog normal-box">
								<div className="next-dialog-header"><Icon type="link" />预热打折</div>
								<div className="next-dialog-body">
									<h2>预热打折</h2>
									<p>预热期间加入购物车</p>
									<p title="设置一个定时上架">等待折扣开始</p>
									<p><Button>立即使用</Button></p>
								</div>
							</div>
						</Col>
						*/}
						<Col>
							<div className="next-dialog normal-box">
								<div className="next-dialog-header"><Icon type="process" />标签折扣</div>
								<div className="next-dialog-body">
									<h2>付款倒计时</h2>
									<p>购买指定商品，付款后获得折扣；</p>
									<p>倒计时一结束，立即取消折扣。</p>
										依赖<Tag shape="readonly" type="primary" size="small">倒计时开关</Tag>
									<p>
										<Link to="/ring_tags"><Button>立即使用</Button></Link>
									</p>
								</div>
							</div>
						</Col>
						
						<Col span="8">
							<div className="next-dialog normal-box">
								<div className="next-dialog-header"><Icon type="prompt" />标签折扣</div>
								<div className="next-dialog-body">
									<h2>二维码折扣</h2>
									<p>扫码获得折扣</p>
									<p><a href={links.qrring}><Button>立即使用</Button></a></p>
								</div>
							</div>
						</Col>
						
						<Col fixedSpan="16">
							<div className="next-dialog normal-box">
								<div className="next-dialog-header"><Icon type="time" />倒计时开关</div>
								<div className="next-dialog-body">
									<Row justify="center">
										{tmcButton}
									</Row>
								</div>
									<div className="next-dialog-body">
										开关开启，自动处理订单。连环标签依赖该开关。
									</div>
							</div>
						</Col>
					</Row>
				</Col>
				<Col fixedSpan="16">
					<div className="next-dialog news-box">
						<div className="next-dialog-body">
							<h3>没有卖不出去的货，只有卖不对的消费者</h3>
							<a href="https://h5.m.taobao.com/qn/pc/niuba-feeds.html#/detail/10281358?_k=6dr0i6" target="_blank"><img src="https://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/TB1WMvhRVXXXXahaXXXSutbFXXX_260x260.jpg" /></a>
							<ul>
								<li><a href="https://h5.m.taobao.com/qn/pc/niuba-feeds.html#/detail/10271671?_k=z2zpm2" target="_blank">不刷单，七天流量破万 | 精细化运营实操</a></li>
								<li><a href="https://h5.m.taobao.com/qn/pc/niuba-feeds.html#/detail/10234825?_k=b4u6qh" target="_blank">做好这5点，买家舍不得离开你的店！</a></li>
								<li><a href="https://h5.m.taobao.com/qn/pc/niuba-feeds.html#/detail/10270813?_k=gha440" target="_blank">让买家忍不住下单的致命一招</a></li>
							</ul>
						</div>
					</div>
				</Col>
			</Row>
    </div>;
  }
}
export default connect((state)=> {
  return {
    index: state.index,
  };
})(Index);
